import React from 'react'
import axios from 'axios'
import '../css/news.css'

class News extends React.Component {
    constructor() {
        super();
        this.state = {
            newsList: []
        }
    }

    componentWillMount() {
        axios.get('http://localhost:3000/news.json').then(res=> {
            this.state.newsList = res.data;
            this.setState({
                newsList: this.state.newsList
            })
        })
    }

    render() {
        return (
            <div className="news_data_box">
                {
                    this.state.newsList.map((item, index)=> {
                        return <div key={index} className="news_item" onClick={()=> {
                            // console.log(this)
                            this.props.history.push({
                                pathname: '/newsData',
                                state: item
                            })
                        }}>
                            <div className="news_title">
                                <div className="news_title_content">{item.title}</div>
                                <div className="news_title_desc">{item.desc}</div>
                            </div>
                            <div className="news_pic">
                                <img src={item.pic} width="100%" height="100%" />
                            </div>
                        </div>
                    })
                }
                
            </div>
        )
    }
}

export default News